<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/elementui.css">
    <link href="/css/login.css" rel="stylesheet" type="text/css">
    <style>
        .el-icon-success {
            display: none;
        }

        .el-icon-warning {
            display: none;
        }

        .el-icon-error {
            display: none;
        }
    </style>
</head>

<body>
    <div class="login"
        style='background-image: url("/images/bg.jpg");background-repeat: no-repeat; background-size:100% 100%;background-attachment:fixed;'
        id="login">
        <!-- <div class="bg-img"></div> -->
        <div class="login-box">
            <div>
                <p>注册</p>
                <div class="box">
                    <input placeholder="请输入用户名" v-model="username" />
                </div>
                <div class="box">
                    <input placeholder="请输入密码" type="password" v-model="passsword"/>
                </div>
                <div class="box">
                    <input placeholder="请输入再次输入密码"  type="password"  v-model="newPassword"/>
                </div>
                <button @click="login">注册</button>
                <div class="to" @click="toLogin">已有账号？去登录</div>
            </div>
        </div>

        <div></div>
    </div>
    <script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
    <script src="/tools/elementui.js"></script>
    <script>
        new Vue({
            el: '#login',
            data() {
                return {
                    username: '',
                    passsword: '',
                    newPassword: ''
                }
            },
            methods: {
                toLogin() {
                    window.location.href = "/login"
                },

                login() {
                    let that = this;
                    if (!this.username) {
                        this.$message({
                            message: '请输入用户名',
                            type: 'warning'
                        });
                        return
                    }

                    if (!this.passsword) {
                        this.$message({
                            message: '请输入密码',
                            type: 'warning'
                        });
                        return
                    }

                    if(!this.newPassword) {
                        this.$message({
                            message: '请再次输入密码',
                            type: 'warning'
                        });
                        return
                    }

                    if(this.passsword !== this.newPassword){
                        this.$message({
                            message: '两次密码不一致，请重新输入',
                            type: 'warning'
                        });
                        return
                    }

                    ajax({
                        type: 'post',
                        url: '/saveStaff',
                        ansyc: false,
                        data: {
                            nick: this.username,
                            username: this.username,
                            passsword: this.passsword,
                        },
                        contentType: 'application/json;charset=UTF-8',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
                                that.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });
                            } else {
                                that.$message({
                                    message: res.message,
                                    type: 'error'
                                });
                            }
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>